<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>neon light</title>
    <style media="screen">
       *{
         margin:0;
         padding:0;
         font-fanily:consolas;
         box-sizing:border-box;
       }
       body{
         display:flex;
         justify-content:center;
         align-items:center;
         min-height:100vh;
         flex-direction:column;
          background:#050b01;
          cursor:pointer;
       }
       a{
         position:relative;
         display:inline-block;
         padding:25px 30px;

         margin:40px 0;
         color:#03e9f4;
         font-size:24px;
         text-decoration:none;
         text-transform:uppercase;
         overflow:hidden;
         transition:0.5s;
         letter-spacing:4px;
         -webkit-box-reflect:below 1px linear-gradient(trensparent,#0005);
       }
       a:hover{
         background:#f4e403;
         color:#050801;
         box-shadow:0 0 5px #f7a8a8,0 0 25px #ec0606,0 0 50px #f40303,0 0 200px #f40303;

       }
       a span{
         position:absolute;
         display:block;
       }
       a span:nth-child(1){
         top:0;
         left:0;
         width:100%;
         height:2px;
         background:linear-gradient(90deg,transparent,#ffa600);
         animation:animate1 1s linear infinite;
       }
       @keyframes animate1{
         10%{left:-100%;}
         30%,00%{left:100%;}
       }
       
    .a2{
       top:-100%;
       right:0;
       width:2px;
       height:100%;
       background:linear-gradient(90deg,transparent,#03e9f4);
       animation:animate2 1s linear infinite;
       animation-delay:0.25s;
     }
     @keyframes animate2{
       0%{top:-100%;}
     50%,100%{top:100%;}
   }
    .a3{
     bottom:0;
     right:-100%;
     width:100%;
     height:2px;
     background:linear-gradient(270deg,transparent,#37e02b);
     animation:animate3 1s linear infinite;
     animation-delay:0.5s;
   }
   @keyframes animate3{
     0%{right:-100%;}
   50%,100%{right:100%;}
 }
.a4{
   bottom:-100%;
   left:0px;
   width:2px;
   height:100%;
   background:linear-gradient(90deg,transparent,#82f478);
   animation:animate4 1s linear infinite;
   animation-delay:0.75s;
 }
 @keyframes animate4{
   0%{bottom:-100%;}
 50%,100%{bottom:100%;}
}

.button:hover{

  padding: 40px;
  border-radius: 50px;

}
    </style>

  </head>
  <body>

      <a class="button" href="#" >
      <span></span>
      <span class="a2"></span>
      <span class="a3"></span>
      <span class="a4"></span>
      BUTTON</a>
     
  </body>
</html>
